<template>
  <!-- <div class="background-year"></div> -->

  <!-- <img class="fireworks-move2" src="http://www.higuang365.com/public/images/common/year/fireworks.gif"/> -->
  <div class="margin"></div>

  <header class="home-header wrap" :class="{ active: active }">
    <div class="app-name">
      <img class="name-title" data-v-75c7c845="" src="http://www.higuang365.com/public/images/common/logo.png" />
    </div>
    <router-link class="header-search" tag="span" to="./searchbefore">
      <!-- <i class="iconfont icon-search"></i> -->
      <van-icon class="icon-search" name="search" size="20" />
      <div class="search-title">
        <van-swipe style="height: 20px;" vertical :show-indicators="false" autoplay="4200" duration="800"
          :touchable="false">
          <van-swipe-item>梅克伦堡啤酒</van-swipe-item>
          <van-swipe-item>鲜汁客果汁</van-swipe-item>
          <van-swipe-item>一百份什锦</van-swipe-item>
          <van-swipe-item>橙宝西柚汁</van-swipe-item>
        </van-swipe>
      </div>
    </router-link>

    <!-- <img class="fireworks-move1" src="http://www.higuang365.com/public/images/common/year/fireworks.gif"/>
    <img class="fireworks2" src="http://www.higuang365.com/public/images/common/year/fireworks2.png"/>
    <img class="lantern" src="http://www.higuang365.com/public/images/common/year/lantern.gif"/>
     -->
    <!-- <router-link class="login" tag="span" to="./login" v-if="!$store.state.userInfo.F_Account"
      >登录</router-link
    > -->
    <!-- <router-link class="login" tag="span" to="./user" v-else>
      <van-icon name="manager-o" />
    </router-link> -->
  </header>
</template>
<script>
import { reactive, toRefs, nextTick } from "vue";
export default {
  name: "top",
  setup() {
    const data = reactive({
      active: false,
      value: "",
    });
    nextTick(() => {
      document.getElementById("app").addEventListener("scroll", () => {
        const scrollTop = document.getElementById("app").scrollTop;
        data.active = Math.abs(Math.round(scrollTop)) < 300 ? false : true;
      });
    });

    return { ...toRefs(data) };
  },
};
</script>
<style lang="scss" scoped>
@import "@/common/style/mixin";

.margin {
  height: 5.5rem;
}

.home-header {
  // filter: grayscale(100%);
  position: fixed;
  top: 0;
  @include wh(100%, 5.5rem);
  @include fj();
  // line-height: 50px;
  padding: 0.5rem 1.5rem 0;
  @include boxSizing();
  font-size: 1rem;
  color: $green;
  z-index: 1000;
  color: #fff !important;
  background: url("http://www.higuang365.com/public/images/common/activity/2303/top_pro10.png") no-repeat !important;
  background-size: 100% 100% !important;
  //  background:$green!important ;
  transition: background 0.5s cubic-bezier(0.39, 0.58, 0.57, 1);

  .nbmenu2 {
    color: #fff;
  }

  &.active {
    background: #fff;
    color: $green;

    .nbmenu2 {
      color: $green;
    }

    .login {
      color: $green;
    }
  }

  .app-name {
    padding: 1.2rem 1rem 0.8rem 0;
    font-size: 1.8rem;
    font-weight: bold;

    // border-right: 1px solid #666;
    .name-title {
      height: 3rem;
      width: 10rem;
    }

    .app-title2 {
      font-size: 1.2rem;
    }
  }

  .header-search {
    display: flex;
    // @include wh(74%, 20px);
    line-height: 2rem;
    margin: 1rem;
    padding: 0.5rem 0;
    color: #232326;
    background: rgb(224 224 224 / 70%);
    border-radius: 2rem;
    flex-grow: 1;
    justify-content: center;
    position: relative;

    color: #666;

    .icon-search {
      // padding: 0 1rem;
      // font-size: 1.7rem;
      position: absolute;
      left: 15px;
    }

    .search-title {
      font-size: 1.2rem;
      line-height: 2.1rem;
    }
  }

  .icon-iconyonghu {
    color: #fff;
    font-size: 2.2rem;
  }

  .login {
    color: #fff;
    line-height: 5.2rem;

    .van-icon-manager-o {
      font-size: 2rem;
      vertical-align: -0.3rem;
    }
  }
}

.background-year {
  position: fixed;
  z-index: -1;
  width: 100%;
  height: 21rem;
  background: url("http://www.higuang365.com/public/images/common/year/top.png");
}

.lantern {
  width: 4rem;
}

.fireworks2 {
  position: fixed;
  z-index: -1;
  left: 0rem;
  width: 10rem;
  height: 10rem;
  top: -3.5rem;
}

.fireworks-move1 {
  position: fixed;
  width: 8rem;
  height: 4rem;
  right: 6rem;
  top: 2rem;
}

.fireworks-move2 {
  position: fixed;
  width: 10rem;
  height: 5rem;
  right: -4rem;
  top: 14rem;
  z-index: -1;
}
</style>
